<template>
  <span>
    <CheckUserInfo v-if="userData[idKey]" :user-id="userData[idKey]" class="process-user-card" placement="left" container-tag="div">
      <el-tooltip v-if="userData.isSent" :open-delay="800" placement="bottom" effect="dark" content="已抄送">
        <el-avatar :size="size" :src="userData.avatar" :class="{'border':isBorder && !isFlyUser, 'fly-notice-user ':isFlyUser}" class="avatar-box popover-avatar">
          <img :src="adminIcon" :style="`width:${size}px;height:${size}`" class="user-avatar">
        </el-avatar>
      </el-tooltip>
      <el-avatar v-else :size="size" :src="userData.avatar" :class="{'border':isBorder && !isFlyUser, 'fly-notice-user ':isFlyUser}" class="avatar-box popover-avatar">
        <img :src="adminIcon" :style="`width:${size}px;height:${size}`" class="user-avatar">
      </el-avatar>
    </CheckUserInfo>
    <template v-else>
      <el-tooltip v-if="userData.isSent" :open-delay="800" placement="bottom" effect="dark" content="已抄送">
        <el-avatar :size="size" :src="userData.avatar" :class="{'border':isBorder && !isFlyUser, 'fly-notice-user ':isFlyUser}" class="avatar-box popover-avatar">
          <img :src="adminIcon" :style="`width:${size}px;height:${size}`" class="user-avatar">
        </el-avatar>
      </el-tooltip>
      <el-avatar v-else :size="size" :src="userData.avatar" :class="{'border':isBorder && !isFlyUser, 'fly-notice-user ':isFlyUser}" class="avatar-box popover-avatar">
        <img :src="adminIcon" :style="`width:${size}px;height:${size}`" class="user-avatar">
      </el-avatar>
    </template>
  </span>
</template>

<script>
import adminIcon from '@/assets/user-avatar.png';
import flyUserTag from '@/assets/auditProcess/userStatus/flyUserTag.png';
import flyUserBorder from '@/assets/auditProcess/userStatus/flyUserBorder.png';
export default {
  props: {
    size: {
      type: Number,
      default: 42
    },
    userData: {
      type: Object,
      default() {
        return {};
      }
    },
    idKey: {
      type: String,
      default: 'id'
    },
    isBorder: {
      type: Boolean,
      default: false
    },
    isFlyUser: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      adminIcon, flyUserTag, flyUserBorder
    };
  }
};
</script>

<style lang="scss" scoped>
.process-user-card {
  &::v-deep {
    .check-user-loading-container {
      display: flex;
    }
  }
}
::v-deep .avatar-box{
  img{
    width: 100% !important;
    height: 100% !important;
  }
}
.fly-notice-user {
  position: relative;
  // background-image: linear-gradient(to bottom, rgb(123, 93, 255) 0%, rgb(56, 225, 255) 100%);
  background-image: url(../../assets/auditProcess/userStatus/flyUserBorder.png);
  background-size: 100%;
  background-repeat: no-repeat;
  padding:2px;
  box-sizing:border-box;
  &::v-deep {
    img {
      border-radius: inherit;
    }
  }
  overflow: visible !important;
  &::before {
    position: absolute;
    content: '';
    width: 40px;
    height: 16px;
    background-image: url(../../assets/auditProcess/userStatus/flyUserTag.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: -20px;
    bottom: 0;
  }
}
// .fly-notice-tag {
//   position: absolute;
//   width: 40px;
//   left: 50%;
//   margin-left: -20px;
//   bottom: 0;
// }
.popover-avatar{
  flex-shrink: 0;
  &.border {
    border: 2px solid #fff;
  }
  img{
    &:hover{
      cursor: pointer;
    }
  }
}
</style>
